<template>
  <div class="app-container">
    <div class="toolbar">
      <el-button type="primary" @click="handleAddAnalogy">新增</el-button>
      <el-button type="danger" @click="handleDeleteClass" :disabled="!multipleSelection.length"
        >删除</el-button
      >
    </div>
    <Tabel
      :tableData="tableData"
      :cols="cols"
      :isSelect="true"
      @selection-change="handleSelectionChange"
    >
      <template #operationCol>
        <el-table-column>
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleEditClass(row)">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </Tabel>
    <el-dialog
      :title="submitType ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :model="formData" label-width="110px">
          <el-form-item v-for="item of cols" :key="item.key" :label="item.label" :prop="item.key">
            <el-select v-model="formData[item.key]" v-if="item.type === 'select'">
              <el-option
                v-for="(value, key) in getEnum([item.selectDataEnum])"
                :key="key"
                :label="value"
                :value="+key"
              >
              </el-option>
            </el-select>
            <el-input
              v-else
              v-model="formData[item.key]"
              :disabled="submitType && item.notAllowEdit"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Tabel from '@/components/Table'
  import { getClassList, addClass, editClass, deleteClass } from '@/api/TeachingCenter/classManage'
  import { mapGetters } from 'vuex'
  export default {
    name: 'classManage',
    components: { Tabel },
    data() {
      return {
        tableData: [],
        cols: [
          {
            key: 'gradeLevel',
            label: '年级',
            type: 'select',
            selectDataEnum: 'ageList',
            formatter: (row) => {
              if (row.gradeLevel) {
                // if (row.gradeLevel in this.levelEnum) {
                //   return this.levelEnum[row.gradeLevel]
                // }
                return this.ageList[row.gradeLevel] || row.gradeLevel
              }
            }
          },
          {
            key: 'classNo',
            label: '班别',
            notAllowEdit: true
          },
          {
            key: 'name',
            label: '班别名'
          }
          // {
          //   key: 'classTeacher',
          //   label: '班主任编号',
          //   notAllowEdit: true
          // },
          // {
          //   key: 'major',
          //   label: '专业'
          // },

          // {
          //   key: 'studentNum',
          //   label: '学生数量'
          // }
        ],
        multipleSelection: [],
        dialogVisible: false,
        formData: {},
        submitType: null //0：新增,1:修改
      }
    },
    computed: {
      ...mapGetters(['ageList'])
    },
    created() {
      this._getClassList()
    },
    methods: {
      async _getClassList() {
        const { data } = await getClassList({ pageModel: {} })
        this.tableData = data.records
      },
      handleAddAnalogy() {
        this.dialogVisible = true
        this.submitType = 0
        this.formData = Object.assign({})
      },
      handleEditClass(row) {
        this.formData = { ...row }
        this.submitType = 1
        this.dialogVisible = true
      },
      handleDeleteClass() {
        this.$confirm('是否进行删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const ids = this.multipleSelection.map((item) => item.id)
          await deleteClass({ ids })
          this._getClassList()
          this.$Msg.success('删除成功!')
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      async submit() {
        const submitArr = [addClass, editClass]
        const parmas = this.formData
        console.log(parmas);
        await submitArr[this.submitType](parmas)
        this._getClassList()
        this.$Msg.success('操作成功!')
        this.dialogVisible = false
      },
      getEnum(dataEnum) {
        return this[dataEnum]
      }
    }
  }
</script>
